<template>
    <div class="viedoOne">
        <p class="sceneRadio">场景电台</p>
        <ul>
        <li @click="m_play(songArr)">
            <div><i class="iconfont icon-chuzuche"></i></div>
            <p class="typeText">在路上</p>
        </li>
        <li @click="m_play(songArr)">
            <div><i class="iconfont icon-taideng"></i></div>
            <p class="typeText">工作</p>
        </li>
        <li @click="m_play(songArr)">
            <div><i class="iconfont icon-xiezi"></i></div>
            <p class="typeText">运动</p>
        </li>
        <li @click="m_play(songArr)"> 
            <div><i class="iconfont icon-iconset0454"></i></div>
            <p class="typeText">晚安</p>
        </li>
    </ul>
   
    </div>
    
</template>

<script>
import jsonp from "jsonp";

export default {
  name: "viedoOne",
  data() {
    return {
      songArr: [],
      song: Math.floor(Math.random() * 10)
    };
  },
  methods: {
    m_play(songArr) {
      this.$router.push("/timeRadio/" + songArr);
      this.$store.commit("ageisplayicon", false);
    }
  },
  created() {
    jsonp(
      "http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=24&size=10&offset=0",
      null,
      (err, res) => {
        if (!err) {
          this.songArr = res.song_list[this.song].song_id;
        } else {
          console.log(err);
        }
      }
    );
  }
};
</script>

<style lang="scss">
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 0;
}
.viedoOne {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 0.2rem;
  padding: 0.5rem 8.5%;
  box-sizing: border-box;
  box-shadow: 0 2px 27px 0 rgba(0, 0, 0, 0.1);
  .sceneRadio {
    font-size: 0.5rem;
    color: #090909;
    text-align: center;
    padding-bottom: 0.5rem;
  }
  ul {
    width: 100%;
    li {
      display: inline-block;
      width: 25%;
      text-align: center;
      height: 100%;
      div {
        margin: 0 auto;
        width: 1.4rem;
        height: 1.4rem;
        line-height: 1.4rem;
        text-align: center;
        border-radius: 50%;
        border: 0.05rem solid #18c2ba;
        margin-bottom: 0.25rem;
      }
      .typeText {
        font-size: 0.35rem;
        color: #18c2ba;
        padding-bottom: 0.35rem;
      }
      i {
        font-size: 0.85rem;
        color: #18c2ba;
      }
    }
  }
}
</style>

